<template>
  <el-container>
    <el-header><Header></Header></el-header>
    <el-container>
      <el-aside style="width: 15%;background-color: #ffffff;">
           <el-menu  default-active="2" class="el-menu-vertical-demo" >
             <el-menu-item>

               <el-button @click="type1()"  style="color: palevioletred;" type="text">找回密码</el-button>
             </el-menu-item>
             <el-menu-item>
               <el-button @click="type2()" style="color: palevioletred;" type="text">修改密码</el-button>

             </el-menu-item>
           </el-menu>
      </el-aside>
       <div class="home-box">
         <el-row :gutter="10">
           <el-col :xs="24" :sm="10" :md="8" :lg="8" :offset="8">
               <div v-if="typeId==1">
                   <h1 class="register-title">找回密码</h1>
                   <div v-show="show2">
                      <el-form status-icon label-width="100px" class="demo-ruleForm">
                       <el-form-item label="QQ" prop="qqEmail"><el-input type="text" v-model="qqEmail" placeholder="输入QQ号"></el-input></el-form-item>
                       <el-form-item prop="code">
                         <el-button round v-if="showTime" type="primary" size="mini" @click="getMail()">{{ text }}</el-button>
                         <el-button v-else size="mini" circle type="infor">{{text2}}</el-button>
                         <el-input type="text" v-model="code" placeholder="输入QQ邮箱验证码"></el-input>
                       </el-form-item>
                       <el-form-item>
                         <el-button style="float: left;" type="success" size="small" @click="pwdCode()">确认</el-button>
                         <el-button style="float: left;" size="small" type="danger"  @click="del()">取消</el-button>
                       </el-form-item>
                      </el-form>
                   </div>
                   <div v-show="!show2">
                     <el-form status-icon label-width="100px" class="demo-ruleForm">
                       <el-form-item label="新密码"><el-input type="password" v-model="newPwd" placeholder="输入新密码"></el-input></el-form-item>
                       <el-form-item label="确认密码"><el-input type="password" v-model="password2" placeholder="输入确认密码"></el-input></el-form-item>
                       <el-form-item>
                         <el-button style="float: left;" type="success" size="small" @click="updatePwd2()">确认</el-button>
                          <el-button style="float: left;" size="small" type="danger"  @click="del()">取消</el-button>
                         </el-form-item>
                     </el-form>
                   </div>

               </div>

               <div v-if="typeId==2">
                   <h1 class="register-title">修改密码</h1>
                   <el-form status-icon label-width="100px" class="demo-ruleForm">
                     <el-form-item label="旧密码"><el-input type="password" v-model="password" placeholder="输入旧密码"></el-input></el-form-item>
                     <el-form-item label="新密码"><el-input type="password" v-model="newPwd" placeholder="输入新密码"></el-input></el-form-item>
                     <el-form-item label="确认密码"><el-input type="password" v-model="password2" placeholder="输入确认密码"></el-input></el-form-item>
                     <el-form-item>
                       <el-button style="float: left;" type="success" size="small" @click="updatePwd()">确认</el-button>
                        <el-button style="float: left;" size="small" type="danger"  @click="del()">取消</el-button>
                     </el-form-item>
                   </el-form>
               </div>

               <div v-show="show1">
                 <h1 class="register-title">个人信息</h1>
                 <el-form status-icon label-width="100px" class="demo-ruleForm">
                   <el-form-item label="用户名"><el-input type="text" v-model="user.username" placeholder="输入用户名"></el-input></el-form-item>
                   <el-form-item label="手机号"><el-input type="text" v-model="user.phone" placeholder="输入手机号"></el-input></el-form-item>
                   <el-form-item label="QQ"><el-input type="text" v-model="user.qqEmail" placeholder="输入QQ邮箱"></el-input></el-form-item>
                   <el-form-item label="上传头像">
                     <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :before-upload="beforeAvatarUpload">
                       <img v-if="imageUrl" :src="imageUrl" class="avatar" style=" width: 80px;height: 100px;" />
                       <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                     </el-upload>
                      <span>图片不能超过50kB</span>
                   </el-form-item>

                   <el-form-item>
                     <el-button style="float: left;" type="success" size="small" @click="updateUser()">确认</el-button>
                      <el-button style="float: left;" size="small" type="danger"  @click="del2()">返回</el-button>
                   </el-form-item>

                 </el-form>

               </div>

           </el-col>
         </el-row>
       </div>



    </el-container>
    <el-footer><Footer></Footer></el-footer>
  </el-container>
</template>

<script>
import Footer from '@/components/Footer';
import Header from '@/components/Header';
export default {
  data() {
    return {
      show2:true,
      typeId:null,
      show1:true,
	    typeList:null,
      user: this.$store.getters.getUser(),
      user2: {},
      password2: null,
      newPwd:null,
      password:null,
      imageUrl: '',
      mailKey: '',
      qqEmail:null,
      timer: null,
      text: '获取验证码',
      text2:null,
      isClick: true,
      countdown: 60,
      code: '',
      showTime:true,
    };
  },

  // 组件声明
  components: {
    Footer: Footer,
    Header: Header
  },
  created() {
    this.beforeAvatarUpload(file),
    this.findAll()
  },
  methods: {

    beforeAvatarUpload(file) {
      //文件上传时 请求方式必须是post  enctype必须为multipart/form-data
      var fileParam = {
        photo: file,
        userId: this.user.userId
      };
      var formData = new FormData();
      formData.append('userId', this.user.userId);
      formData.append('photo', file);
      let _this = this;
      this.axios({
        method: 'post',
        url: _this.apiUrl2 + '/user/photo',
        data: formData,
        headers: {
          'content-type': 'multipart/form-data'
        }
      }).then(res => {
        if (res.data.state) {
          (_this.imageUrl = _this.apiUrl3 + res.data.photo),
            _this.$message({
              message: res.data.msg,
              type: 'success'
            });
        } else {
          this.$message({
            message: res.data.msg,
            type: 'warning'
          });
        }
      });
    },
    UploadUrl() {
      return;
    },
    type1(){
      this.typeId=1;
      this.show1=false;
    },
    type2(){
      this.typeId=2;
      this.show1=false;
    },
    loading() {
      //启动定时器
      this.countdown -= 1; //定时器减1
      this.text2 = this.countdown ;
    },
    clearTimer() {
      //清除定时器
      clearInterval(this.timer);
      this.timer = null;
      this.isClick = true;
      this.showTime=true;
      this.countdown = 60;
    },
    //获取QQ邮箱验证码
    getMail() {
      if (this.isClick == false) {
        return;
      }
      this.isClick = false;
      this.loading(); //启动定时器
      this.showTime=false;
      this.timer = setInterval(() => {
        if (this.countdown == 0) {
          //设置的定时器时间为0后执行的操作
          this.timer && this.clearTimer(); //关闭定时器
        } else {
          this.loading();
        }
      }, 1000);
      //创建定时器
      let _this = this;
      this.axios.get(this.apiUrl2 + '/user/mail?qqEmail=' + this.qqEmail).then(res => {
        _this.mailKey = res.data.mailKey;
        _this.$message({
          message: res.data.msg,
          type: 'success'
        });
      });
    },
    pwdCode(){
      var userParam = {
       code:this.code,
       mailKey:this.mailKey
      };
      console.log(userParam)
      let _this = this;
      this.axios.post(this.apiUrl2 + '/user/pwdCode', userParam).then(res => {
        if (res.data.state) {
           _this.show2=false,
          _this.$message({
            message: res.data.msg,
            type: 'success'
          });

        } else {
          this.$message({
            message: res.data.msg,
            type: 'warning'
          });
        }
      });
    },
    del(){
      this.typeId=null,
      this.show1=true
    },
    del2(){
       this.$router.push('/home');
    },
    updatePwd(){
      var userParam = {
        userId: this.user.userId,
        password: this.password,
        password2:this.password2,
        newPwd:this.newPwd
      };
      console.log(userParam)
      let _this = this;
      this.axios.post(this.apiUrl2 + '/user/pwd', userParam).then(res => {
         console.log(res.data)
        if (res.data.state) {
           _this.$store.dispatch('asyncDelToken');
          _this.$message({

            message: res.data.msg,
            type: 'success'
          });
          _this.$router.push('/login');
        } else {
          this.$message({
            message: res.data.msg,
            type: 'warning'
          });
        }
      });

    },
    updatePwd2(){
      var userParam = {
        userId: this.user.userId,
        password:this.user.password,
        password2:this.password2,
        newPwd:this.newPwd
      };
      let _this = this;
      this.axios.post(this.apiUrl2 + '/user/pwd2', userParam).then(res => {
        if (res.data.state) {
           _this.$store.dispatch('asyncDelToken');
          _this.$message({
            message: res.data.msg,
            type: 'success'
          });
          _this.$router.push('/login');
        } else {
          this.$message({
            message: res.data.msg,
            type: 'warning'
          });
        }
      });

    },
    updateUser() {
      var userParam = {
        userId: this.user.userId,
        username: this.user.username,
        phone: this.user.phone,
        qqEmail: this.user.qqEmail
      };
      let _this = this;
      this.axios.post(this.apiUrl2 + '/user/update', userParam).then(res => {
        if (res.data.state) {
          (_this.user2 = res.data.user), _this.$store.dispatch('asyncUpdateUser', _this.user2);
          _this.$message({
            message: res.data.msg,
            type: 'success'
          });
          _this.$router.push('/home');
        } else {
          this.$message({
            message: res.data.msg,
            type: 'warning'
          });
        }
      });
    }
  }
};
</script>

<style>
.home-box {
  width: 100%;
  padding: 2px;
  float: left;
 /* float: right; */
  /*  margin: 100px auto; */
  padding: 20px 50px 10px 10px;
  border: 1px solid #ffffff;
  /* background-image: url(../../static/zm1.jpg); */
}
.el-header,
.el-footer {
  /*  background-color: #B3C0D1; */
  /* background-image: url(../../static/zm6.jpg); */
  /*  color: #333; */
  /* text-align: center; */
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
  line-height: 50px;
}

.el-aside {
  color: #FFFFFF;
  text-align: center;
  /* line-height: 200px; */
  height: 650px;
}

.el-main {
  color: #333;
  text-align: center;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  /*  background: #99a9bf; */
}
.bg-purple {
  /* background: #d3dce6; */
}
.bg-purple-light {
  /*  background: #e5e9f2; */
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 5px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  /* clear: both */
}

.box-card {
  width: 350px;
  margin-top: 20px;
}
.el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
